<template>
  <div class="movie border-bottom">
    <div class="movie-img">
      <div class="img-wrapper">
        <img :src="movieData.cover_pic" class="inner-img"/>
        <div class="movie-score">{{movieData.douban_score}}</div>
      </div>
    </div>
    <div class="movie-info">
      <div class="movie-title">
        <div class="movie-name" @click="elName = !elName" :class="{'el-name':elName}">
          {{movieData.name}}
          <span class="movie-year">({{(movieData.pub_date || '').split(' ')[3]}})</span>
        </div>
      </div>
      <div class="movie-type" :class="{'el-type':elType}" @click="elType = !elType"><span class="item-title">类型：</span>{{movieData.classification}}</div>
      <div class="movie-area" :class="{'el-area':elArea}" @click="elArea = !elArea"><span class="item-title">地区：</span>{{movieData.area}}</div>
      <div class="movie-actors" :class="{'el-actors':elActors}" @click="elActors = !elActors"><span class="item-title">主演：</span>{{movieData.actors}}</div>
      <div class="movie-director" :class="{'el-director':elDirector}" @click="elDirector = !elDirector"><span class="item-title">导演：</span>{{movieData.director}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Movie',
  props: {
    movieData: Object
  },
  mounted () {
  },
  data () {
    return {
      elName: true,
      elType: true,
      elArea: true,
      elActors: true,
      elDirector: true
    }
  },
  methods: {
  }
}
</script>
<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .movie
    margin-top: .7rem
    width: 100%
    display: flex
    padding-left: .1rem
    padding-bottom: .4rem
    position: relative
    .movie-img
      height: 100%
      width: 1.5rem
      .img-wrapper
        overflow: hidden
        width: 100%
        height: 0
        padding-bottom: 141.5%
        position: relative
        .inner-img
          width: 100%
          height: 100%
          position: absolute
        .movie-score
          width: 0.4rem;
          line-height: 0.2rem;
          font-size: 0.2rem;
          font-weight: bolder
          color: orange
          position: absolute
          bottom: .05rem
          left: 1.16rem
    .movie-info
      padding-left: .15rem
      padding-right: .15rem
      flex: 1
      overflow: hidden
      .movie-title
        font-size: .25rem
        font-weight: bold
        .movie-name
          color: #494949
        .el-name
          no-wrap-multi(2)
        .movie-year
          color: #888
      .movie-type
        font-size: .17rem
        margin-top: .2rem
        color: #111
        .item-title
          color: #666
      .el-type
        no-wrap-multi(2)
      .movie-area
        font-size: .17rem
        margin-top: .08rem
        color: #111
        .item-title
          color: #666
      .el-area
        no-wrap-multi(2)
      .movie-actors
        font-size: .17rem
        margin-top: .08rem
        color: #111
        .item-title
          color: #666
      .el-actors
        no-wrap-multi(3)
      .movie-director
        font-size: .17rem
        margin-top: .08rem
        color: #111
        .item-title
          color: #666
      .el-director
        no-wrap-multi(3)
</style>
